<template>
  <section>
    <el-button size="mini" @click="addDetailBtn">添加</el-button>
    <el-table :data="disease.diseaseDetails">
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-row>治疗方法：</el-row>
          <el-row v-bind:hidden="!props.row.edit">
            <el-table :data="props.row.section" v-if="props.row.section">
              <el-table-column type="index"/>
              <el-table-column label="材料" prop="materials" width="200px">
                <template slot-scope="scope">
                  <el-row v-for="(material,index) in scope.row.materials" :key="index">
                    <el-col :span="15">
                      <el-select v-model="scope.row.materials[index].name" size="mini" value-key="name">
                        <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item">
                        </el-option>
                      </el-select>
                    </el-col>
                    <el-col :span="8">
                      <el-input v-model="scope.row.materials[index].quantity" size="mini"></el-input>
                    </el-col>
                  </el-row>
                  <i class="el-icon-plus" @click="addMaterialBtn(scope.row)"></i>
                </template>
              </el-table-column>
              <el-table-column label="制作">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.method" size="mini" type="textarea"></el-input>
                </template>
              </el-table-column>
              <el-table-column label="用法">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.way" size="mini" type="textarea"></el-input>
                </template>
              </el-table-column>
              <el-table-column label="操作"  width="80" fixed="right">
                <template slot-scope="scope">
                  <i class="el-icon-close" style="color:red" @click="props.row.section.splice(scope.$index,1)"></i>
                </template>
              </el-table-column>
            </el-table>
            <i class="el-icon-plus" @click="addMethodBtn(props.row)"></i>
          </el-row>
        </template>
      </el-table-column>
      <el-table-column type="index" label="序号"/>
      <el-table-column label="名称">
        <template slot-scope="scope">
          <el-input v-if="scope.row.edit" v-model="scope.row.name" size="mini"></el-input>
          <span v-if="!scope.row.edit">{{scope.row.name}}</span>
        </template>
      </el-table-column>
      <el-table-column label="描述">
        <template slot-scope="scope">
          <el-input v-if="scope.row.edit" v-model="scope.row.description" size="mini"></el-input>
          <span v-if="!scope.row.edit">{{scope.row.description}}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作"  width="150" fixed="right">
        <template slot-scope="scope">
          <el-button :type="scope.row.edit?'success':'primary'" @click='confirm(scope.row)' size="mini">{{scope.row.edit?'完成':'编辑'}}</el-button>
          <el-button @click='cancelBtn(scope.row)' size="mini" v-if="scope.row.edit">取消</el-button>
          <el-button @click='del(scope)' size="mini" v-if="!scope.row.edit">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </section>
</template>

<script>
  import Vue from 'vue'//后续添加属性，需要vue联动
  import {mapGetters, mapActions, mapMutations} from 'vuex'
  export default {
    name: "diseaseDetial",
    props: ['disease'],
    data() {
      return {
        options:null
      }
    },
    created(){
      console.log(this.disease)
      this.disease.diseaseDetails.forEach(d=>{
        if(d.method){
          d.section=JSON.parse(d.method)
        }else {
          d.section=[]
        }
      })
      console.log(this.disease.diseaseDetails)
      this.getDataBase()
    },
    computed:{
    },
    watch: {
      disease(nv,ov){
        if(nv){
          console.log(nv.diseaseDetails)
        }
      }
    },
    methods: {
      ...mapActions({
        fetch: 'fetch'
      }),
      getDataBase(){
        this.getFoodList()
      },
      getFoodList(){
        this.fetch({name:"getFoodList"})
          .then(res=>{
            this.options=res.content
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      addDetailBtn(){
        // this.disease.diseaseDetails.push({edit:true,method:['']})
        this.createDiseaseDetail()
      },
      createDiseaseDetail(){
        this.fetch({name:"createDiseaseDetail",data:{name:'',diseaseId:this.disease.id}})
          .then(res=>{
            res.edit = true
            this.disease.diseaseDetails.push(res)
            console.log(res)
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      addMethodBtn(row){
        console.log('添加治疗方法，表格里的一整行',row)
        if(row.section === undefined){
          Vue.set(row,'section',[])//后续添加属性，需要vue联动
        }
        row.section.push({materials:[],method:'',effect:''})
      },
      addMaterialBtn(row){
        console.log('添加材料',row)
        row.materials.push({quantity:'',name:''})
        console.log(row)
      },
      confirm(row){
        if(row.edit === undefined){
          Vue.set(row,'edit',true)//后续添加属性，需要vue联动
          return
        }
        if(row.edit){
          this.loading=true
          console.log(row)
          row.method=JSON.stringify(row.section)
          this.updateDiseaseDetail(row)
        }else {
          row.edit=true
        }
      },
      cancelBtn(row){//取消按钮
        if(row.edit === undefined){
          Vue.set(row,'edit',false)//后续添加属性，需要vue联动
        }else {
          row.edit =false
        }
      },
      del(scope){//删除按钮
        this.loading=true
        this.$confirm('确认删除？')
          .then(()=> {
            this.fetch({name:"delDiseaseDetail",data:{id:scope.row.id}})
              .then(res=>{
                this.loading=false
                this.disease.diseaseDetails.splice(scope.$index,1)
              })
              .catch(err=>{
                console.log(err)
                errHandler.handle(this,err)
              })
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            })
            this.loading = false
          })
      },
      updateDiseaseDetail(row){
        this.fetch({name:"updateDiseaseDetail",data:{...row}})
          .then(res=>{
            this.loading=false
            console.log(res)
            row.edit=false
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      }
    }
  }
</script>

<style scoped>

</style>
